<template>
  <div>
    <van-nav-bar title="城市列表" class="nav_bar"> 
    <template #left>
    <van-icon name="arrow-left" size="18" color="white" @click="$router.go(-1)" />
  </template>
    </van-nav-bar>

    <van-index-bar v-if="flag" :index-list="indexList" >
  <van-index-anchor index="当前城市" />
  <van-cell :title="$route.query.text||'上海'" />

<van-index-anchor v-for="(val,key) in list" :key="key" :index="key" >
  <span>{{key}}</span>

  <van-cell v-for="(citem,cindex) in val" :key="cindex" :title="citem" @click="changHotCity(citem)" />
  </van-index-anchor>

</van-index-bar>

  </div>
</template>

<script>
// import {setHotCity} from '@/api/citylist'
import {setFirstCity,setHotCity} from '@/api/citylist'
export default {
  name: 'CityList',
  props: {},
  data(){
  return{
    renderList:['A','B','C','D','E','F','G','H','I','G','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
    list:{},
    indexList: ['前','热','A','B','C','D',' E ',' F ',' G ',' H ','I','G','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],  
    flag:false,
    text:this.$route.query.text
  }
  },
 async created(){
  const{data:{body}}=await setHotCity()
   this.list['热门城市']=[]
  body.forEach(item=>this.list['热门城市'].push(item.label))
const {data}=await setFirstCity()
console.log(data);
 this.renderList.forEach(item=>{
  this.list[item]=[]
 data.body.forEach(item1=>{
    if(item1.short.toUpperCase().startsWith(item)){
      this.list[item].push(item1.label)
    }
  })
  if(!this.list[item].length){
  !this.list[item].push('暂无')
}
this.flag=true
})
  },
  methods:{
    changHotCity(text){
    this.text=text
    // this.$router.push({
    //   name:'search',
    //   query:{
    //     text
    //   }
    // })
    localStorage.setItem('text',text)
    this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="less">
.nav_bar{
  background-color:#23d881;

}
</style>